<template>
  <el-dialog
    custom-class="custom-dialog-style"
    :visible.sync="modal" title="课程详情" width="70%">
      <el-form
        :model="ruleForm"
        style="width: 100%; margin-bottom: 60px"
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="课程名称" prop="course_name">
          <el-input v-model="ruleForm.course_name" maxlength="50" show-word-limit placeholder="请输入"></el-input>
        </el-form-item>
        <!--<el-form-item label="企业类型" prop="merchant_type_id">-->
        <!--  <el-select style="width: 100%" v-model="ruleForm.merchant_type_id" placeholder="请选择">-->
        <!--    <el-option :label="item.name" :value="item.id" v-for="(item, index) in company_types" :key="index">{{item.name}}</el-option>-->
        <!--  </el-select>-->
        <!--</el-form-item>-->
        <el-form-item label="课程类型" prop="course_type">
          <el-select style="width: 100%" v-model="ruleForm.course_type" placeholder="请选择">
            <el-option label="公开课" :value="1">公开课</el-option>
            <el-option label="选修课" :value="2">选修课</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选修类型" prop="require_type">
          <el-select style="width: 100%" v-model="ruleForm.require_type" placeholder="请选择">
            <el-option label="必修课" :value="1">必修课</el-option>
            <el-option label="选修课" :value="2">选修课</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训类型" prop="trainingType">
          <el-cascader
            :show-all-levels="false"
            :options="options2"
            style="width: 100%"
            v-model="ruleForm.selected_type_ids"
            :props="{ multiple: true, checkStrictly: true }"
            clearable
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="课程图片" prop="img_url">
          <p class="prompt">格式JPG、PNG、JPGE</p>
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            accept=".jpg, .png, jpeg"
            :on-change="(file) => handleAvatarSuccess(file, 1)"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.img_url" :src="ruleForm.img_url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="课程介绍" prop="desc">
          <el-input
            style="width: 100%"
            type="textarea"
            :autosize="{ minRows: 5 }"
            placeholder="请输入课程介绍"
            v-model="ruleForm.desc"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="课件" prop="exercisesId">
          <el-button type="primary" size="mini" @click="addware">添加</el-button>
        </el-form-item>

        <el-table
          :data="tableData"
          border
          v-loading="isTableLoading"
          empty-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
          style="width: 100%;"
        >
          <el-table-column fixed type="index" align="center" label="序号" min-width="50" />
          <el-table-column fixed prop="title" align="center" show-overflow-tooltip label="课件名称" min-width="140" />
          <el-table-column prop="type_name" align="center" label="培训类型" min-width="140"></el-table-column>
          <el-table-column prop="teacher.username" align="center" label="讲师姓名" min-width="140"></el-table-column>
          <el-table-column prop="create_time" align="center" label="创建时间" min-width="140"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <span style="cursor: pointer; color: #0256ff; margin-left: 5px;" v-if="scope.$index != 0" @click="prev(scope.$index)">上移</span>
              <span style="cursor: pointer; color: #0256ff; margin-left: 5px;" v-if="scope.$index != ruleForm.ware_json.length - 1"
                @click="next(scope.$index)">下移</span>
              <span style="cursor: pointer; color: red; margin-left: 5px;" @click=del(scope.row.id)>删除</span>
            </template>
          </el-table-column>
        </el-table>
        <!--<div class="acea-row row-right page" style="margin-bottom: 80px;">-->
        <!--  <el-pagination-->
        <!--    style="margin-top: 5px; margin-bottom: 120px;"-->
        <!--    @size-change="sizeSearch"-->
        <!--    @current-change="search"-->
        <!--    :current-page.sync="queryData.page"-->
        <!--    :page-size.sync="queryData.size"-->
        <!--    layout="total, sizes, prev, pager, next, jumper"-->
        <!--    :total="total"-->
        <!--  >-->
        <!--  </el-pagination>-->
        <!--</div>-->

      </el-form>
      <div class="footer">
        <el-button @click="back">关闭</el-button>
        <el-button type="primary" size="medium" @click="submitForm('ruleForm')">保存</el-button>
      </div>
    <AddWare ref="add" :ware_ids="ruleForm.ware_json" @set-ware-ids="setWareIds"/>

  </el-dialog>
</template>

<script>
import request from '@/libs/request';
import AddWare from './addware.vue'

export default {
  name: 'questionCourseEdit',
  components: {
    AddWare
  },
  data() {
    return {
      modal: false,
      company_types: [],
      ruleForm: {
        id: '',
        course_name: '',
        merchant_type_id: '',
        course_type: '',
        require_type: '',
        type_ids: [],
        selected_type_ids: [],
        img_url: '',
        ware_json: [],
        desc: '',
      },
      rules: {
        course_name: [{ required: true, message: '请输入了课程名称', trigger: 'blur' }],
        // merchant_type_id: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
        type_ids: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        // img_url: [{ required: true, message: '请上传课程图片', trigger: 'change' }],
        // desc: [{ required: true, message: '请输入课程介绍', trigger: 'blur' }],
        course_type: [{required: true, message: '请选择课程类型', trigger: 'blur'}],
        require_type: [{required: true, message: '请选择选修类型', trigger: 'blur'}],
      },
      chapterData: [],
      drawer: false,
      queryData: {
        course_name: '',
        type: '',
        teacher: '',
        page: 1,
        size: 10,
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      options2: [],
    };
  },
  computed: {},
  created() {},
  mounted() {

  },
  methods: {
    showModal(id = '') {
      this.ruleForm.id = id
      this.modal = true
      this.getInfo()
    },
    reset() {
      this.ruleForm = {
        id: '',
        course_name: '',
        merchant_type_id: '',
        require_type: '',
        course_type: '',
        type_ids: [],
        selected_type_ids: [],
        ware_json: [],
        img_url: '',
        desc: '',
      }
    },
    addware() {
      this.$refs.add.showModal()
    },
    close() {
      this.modal = false
    },
    setWareIds(ids) {
      this.ruleForm.ware_json = ids
      this.getSelectedWare()
    },
    getInfo() {
      request({
        url: '/course/info',
        method: 'post',
        data: this.ruleForm
      }).then(res => {
        if (res.data.data) {
          this.ruleForm = res.data.data
        }
        this.options2 = res.data.trainTypes
        this.company_types = res.data.companyTypes
        this.$refs['ruleForm'].clearValidate()
        if (this.ruleForm.ware_json && this.ruleForm.ware_json.length > 0) {
          this.getSelectedWare()
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    getSelectedWare() {
      request({
        url: '/course/warelist',
        method: 'post',
        data: {ids: this.ruleForm.ware_json}
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      let index = children.findIndex((item) => item.id == data.id);
      children.splice(index, 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let loading = this.$loading()
          request({
            url: '/course/save',
            data: this.ruleForm,
            method: 'post',
          }).then(res => {
            loading.close()
            this.modal = false
            this.$parent.getList()
            this.reset()
          }).catch(err => {
            loading.close()
            this.$message.error(err.msg);
          })
        } else {
          // this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    handleAvatarSuccess(file, type) {
      let loading = this.$loading()
      let formData = new FormData()
      formData.append('file', file.raw)
      request.post('/teacher/upload', formData, {
        file: true
      }).then(res => {
        loading.close()
        this.ruleForm.img_url = res.data.url
      }).catch(err => {
        loading.close()
        this.$message.error(err.msg)
      })
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    handleChange(value) {
      if (value) {
        this.ruleForm.type_ids = value.map(item => {
          return item[item.length - 1]
        })
      }
    },
    search(d) {
      if (typeof d == 'number') {
        this.queryData.page = d;
      } else {
        this.queryData.page = 1;
      }
      this.getList();
    },
    sizeSearch(d) {
      this.queryData.size = d;
      this.search();
    },
    getList() {
      this.isTableLoading = true;
      this.tableData = [];
      this.total = 2;
      this.isTableLoading = false;
    },
    back() {
      this.modal = false
      this.reset()
    },
    del(id) {
      this.ruleForm.ware_json.forEach((item, index) => {
        if (item == id) {
          this.ruleForm.ware_json.splice(index, 1)
        }
      })
      this.getSelectedWare()
    },
    next(index) {
      let currentId = this.ruleForm.ware_json[index]
      this.ruleForm.ware_json.splice(index, 1)
      this.ruleForm.ware_json.splice(index + 1, 0, currentId)
      this.getSelectedWare()
    },
    prev(index) {
      let currentId = this.ruleForm.ware_json[index]
      this.ruleForm.ware_json.splice(index, 1)
      this.ruleForm.ware_json.splice(index - 1, 0, currentId)
      this.getSelectedWare()
    }
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.title > span {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}

.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 130px;
  height: 140px;
  display: flex;
  align-items: center;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 140px;
  text-align: center;
}

.avatar {
  width: 100%;
  display: block;
}

.prompt {
  font-size: 12px;
  color: red;
  margin-bottom: 5px;
}

.custom-tree-node {
  font-size: 12px;
  width: 100%;
  display: flex;
  align-items: center;
}

.index {
  padding: 0 5px;
  background: #eff0fd;
  line-height: 14px;
  color: #0256ff;
  border: 1px solid #84adff;
  border-radius: 2px;
  margin-right: 5px;
  font-size: 10px;
}

.el-icon-video-play,
.el-icon-document {
  margin-right: 5px;
}

.tree_btn {
  flex-shrink: 0;
  margin-left: auto;
}

.tree_btn /deep/ .el-button {
  font-size: 11px;
  padding: 5px 8px !important;
  margin-left: 10px !important;
}

.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}

.input > span {
  font-size: 12px;
  flex-shrink: 0;
}

.btn {
  margin-bottom: 20px;
}

.footer {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e6e6e6;
}
</style>
<style>
.custom-dialog-style .el-dialog__body {
  height: 70vh;
}
</style>